<!--
 * @Descripttion:
 * @Copyright: 武汉一一零七科技有限公司©版权所有
 * @Link: 1074699502@qq.com
 * @Contact: QQ:1074699502
 * @LastEditors: wzb
 * @LastEditTime: 2020-10-20 03:09:24
-->
<template>
<view class="shopCard">
    <slot></slot>
    <div class="titleWrap">
        <image :src="info.logo" class="shopLogo2"></image>
        <h1 class="shopTit">{{info.shop_name}}</h1>
    </div>
    <p class="shopdesc">{{info.shop_desc}}</p>
    <view class="imgList">
        <div v-for="(item,index) in info.goods_list" :key="index" class="imgBox">
            <image :src="item.thumb_url" class="thumb"></image>
            <text class="price">¥{{item.min_price}}</text>
        </div>
    </view>
</view>
</template>

<script>
export default {
    name: "shopCard",
    props: {
        info: {
            type: Object,
            required: true,
            default: {}
        }
    }
}
</script>

<style lang="scss" scoped>
.shopCard {
    background-image: linear-gradient(to bottom, #fff5f3 60%, #fff);
    width: 320rpx;
    flex-shrink: 0;
    margin-right: 20rpx;
    border-radius: 8rpx;
    padding: 8rpx 10rpx;
}

.shopdesc {
    font-size: 10px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.titleWrap {
    display: flex;
    align-items: center;

    .shopLogo2 {
        width: 38rpx;
        height: 38rpx;
        border-radius: 100px;
        margin-right: 8rpx;
    }

    .shopTit {
        font-size: 26rpx;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

}

.imgList {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;

    .imgBox {
        width: 32%;
        flex-shrink: 0;
        line-height: 1.2;

        .thumb {
            width: 100%;
            height: 90rpx;
            border-radius: 6rpx;

        }

        .price {
            font-size: 24rpx;
        }
    }
}
</style>
